<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="学员编号">
        <el-input
          v-model="queryParams.customerCode"
          placeholder="请输入学员编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="学员姓名" prop="customerName">
        <el-input
          v-model="queryParams.customerName"
          placeholder="请输入学员姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="上门状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择上门状态"
          clearable
        >
          <el-option label="未签约" :value="0" />
          <el-option label="已签约" :value="1" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="dataList">
      <el-table-column
        label="客户编号"
        align="center"
        prop="customerCode"
        min-width="120"
      />
      <el-table-column label="姓名" align="center" prop="customerName" />
      <el-table-column
        label="预约记录"
        align="center"
        prop="appointmentRecord"
      />
      <el-table-column label="预约时间" align="center" prop="appointmentTime" />
      <el-table-column
        label="预约时间(分)"
        align="center"
        prop="interviewTime"
      />
      <el-table-column label="签约可能" align="center" prop="isSign">
        <template #default="{ row }">
          <div v-if="row.isSign == 0">小</div>
          <div v-else-if="row.isSign == 1">中</div>
          <div v-else>大</div>
        </template>
      </el-table-column>
      <el-table-column label="创建者" align="center" prop="campus" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="已上门" align="center">
        <template #default="{ row }">
          <el-tag type="success" v-if="row.isVisit === 1">已上门</el-tag>
          <el-tag type="info" v-else>未上门</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="确认者" align="center" prop="approverName" />
      <el-table-column label="确认备注" align="center" prop="approverNote" />
      <el-table-column label="确认时间" align="center" prop="approverTime" />
      <el-table-column label="操作" align="center" width="180px" fixed="right">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click="handleGoDoor(scope.row)"
            v-if="scope.row.isVisit === 0"
          >
            确认上门
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getList, goDoor } from "@/api/leadManagement/reservationRecord";

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 定时任务表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        customerCode: "", //客户编号
        grade: "", //年级
        customerName: "", //姓名
        status: "", //签约状态
        phone: "", //手机号码
        sex: "", //性别
        customerSource: "", //线索客户来源
        educationlAdviser: "", //教育顾问
        campus: "", //所属校区
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询定时任务列表 */
    getList() {
      this.loading = true;
      getList(this.queryParams).then((res) => {
        this.dataList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },

    // 表单重置
    reset() {
      this.form = {
        jobId: undefined,
        jobName: undefined,
        jobGroup: undefined,
        invokeTarget: undefined,
        cronExpression: undefined,
        misfirePolicy: 1,
        concurrent: 1,
        status: "0",
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    handleGoDoor({ id }) {
      this.$prompt("请输入备注", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          const approverNote = value ? value.trim() : "-";
          goDoor({ id, approverNote })
            .then(() => {
              this.$message({
                type: "success",
                message: "上门确认成功",
              });
              this.getList();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "上门确认失败",
              });
            });
        })
        .catch(() => {});
    },
  },
};
</script>
